<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Pure Python PyScript tests</title>
        <link rel="stylesheet" href="../../dist/core.css">
        <script type="module" src="../../dist/core.js"></script>
    </head>
    <body>
        <script src="./helper.js"></script>
        <!-- script type="mpy" src="./main.py" config="./settings.json" terminal></script-->
        <template id="test_card_with_element_template">
            <p>This is a test. {foo}</p>
        </template>

        <div id="test_id_selector" style="visibility: hidden;">You found test_id_selector</div>
        <div id="test_class_selector" class="a-test-class" style="visibility: hidden;">You found test_class_selector</div>
        <div id="test_selector_w_children" class="a-test-class" style="visibility: hidden;">
            <div id="test_selector_w_children_child_1" class="a-test-class" style="visibility: hidden;">Child 1</div>
            <div id="test_selector_w_children_child_2" style="visibility: hidden;">Child 2</div>
        </div>

        <div id="div-no-classes"></div>

        <div style="visibility: hidden;">
            <h2>Test Read and Write</h2>
            <div id="test_rr_div">Content test_rr_div</div>
            <h3 id="test_rr_h3">Content test_rr_h3</h3>

            <div id="multi-elem-div" class="multi-elems">Content multi-elem-div</div>
            <p id="multi-elem-p" class="multi-elems">Content multi-elem-p</p>
            <h2 id="multi-elem-h2" class="multi-elems">Content multi-elem-h2</h2>

            <form>
                <input id="test_rr_input_text" type="text" value="Content test_rr_input_text">
                <input id="test_rr_input_button" type="button" value="Content test_rr_input_button">
                <input id="test_rr_input_email" type="email" value="Content test_rr_input_email">
                <input id="test_rr_input_password" type="password" value="Content test_rr_input_password">
            </form>

            <select id="test_select_element"></select>
            <select id="test_select_element_w_options">
                <option value="1">Option 1</option>
                <option value="2" selected="selected">Option 2</option>
            </select>
            <select id="test_select_element_to_clear">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="4">Option 4</option>
            </select>

            <select id="test_select_element_to_remove">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
                <option value="4">Option 4</option>
            </select>

            <div id="element-creation-test"></div>

            <button id="a-test-button">I'm a button to be clicked</button>
            <button>I'm another button you can click</button>
            <button id="a-third-button">2 is better than 3 :)</button>
            <button id="another-test-button">I'm another button to be clicked</button>

            <div id="element-append-tests"></div>
            <p class="collection"></p>
            <div class="collection"></div>
            <h3 class="collection"></h3>

            <div id="element_attribute_tests"></div>
        </div>
        <div id="test-element-container"></div>
    </body>
</html>
